import { defineConfig, ConfigEnv, UserConfig, loadEnv } from 'vite';
import { wrapperEnv } from './build/getEnv.ts';
import vue from '@vitejs/plugin-vue';
import presetEnv from 'postcss-preset-env';
import path from 'path';

// 只要 vite 认为该模块是 静态资源  就会返回处理好的 url 地址
// 开发环境和 dev环境 会 返回不同的打地址 还会加入不用打 hash 文件指纹 一般会替换成 绝对路径
// 直接 这么写 <img src = '/xxxx/'/>  也会进行转换
// 以模块的方式 引入 image 也会进行处理

// 静态资源 就是 图片 字体 视频 音频 等
// 非静态资源 就是 js css 等

// 对于 图片等资源 默认4kb 一下 的会转成 base64 格式 写入html中
// 大于4kb 的会打包到dist下面 然后返回url地址 就相当于 webpack的 url-loader 的 功能一样

// 使用new URL的方式处理变量的静态资源路径 这种 是会进行处理的
// const imgPath = ref('spring');
// // 计算属性处理URL地址
// const url = computed(() => {
//   const href = new URL(`../assets/${imgPath.value}.jpg`, import.meta.url).href;

//   console.log("🚀 ~ href:", href)

//   return href;
// })
// // 事件切换路径字符串
// const handleChange = (e:Event) => {
//   const v = (e.target as HTMLButtonElement).value;
//   imgPath.value = v;
// }

// ！！！！！！！！！
// 这种 是不会进行处理的 没那么智能  ../assets/spring.jpg 就是一个普通字符串
// const spring = ref('../assets/spring.jpg');

// //vite会直接引入这个路径，并不会帮我们解析
// <img :src="spring">

// 注意：虽然你可以直接将路径该为开发环境合适的路径，比如：
// const spring = ref('/src/assets/spring.jpg');
// 但是，你需要考虑到还有生产环境 因为生产环境 打包图片放到了 不同的目录下
// ！！！！！！！！

export default defineConfig(({ command, mode }: ConfigEnv): UserConfig => {
  console.log(command);
  // console.log(mode);

  // console.log(__dirname)
  // console.log(process.cwd())

  const root = process.cwd();

  // 默认读取node环境变量
  // console.log(process.env)
  // mode 表示当前情景 root表示项目根路径，'' 表示前缀，''默认读取所有的环境变量
  const env = loadEnv(mode, root, 'VITE_');
  console.log(env);

  // const { VITE_PORT, VITE_OPEN } = env;
  // const port  = Number(VITE_PORT) || 3000;
  // const open  = Boolean(VITE_OPEN) || true;
  const viteEnv = wrapperEnv(env);

  return {
    root,
    plugins: [vue()],
    server: {
      port: viteEnv.VITE_PORT,
      open: viteEnv.VITE_OPEN,
    },
    // esbuild: {
    //   pure:viteEnv.VITE_DROP_CONSOLE ? ['console.log','debugger'] : []
    // },
    resolve: {
      alias: {
        '@': path.resolve(__dirname, './src'), // 别名配置 必须是绝对路径 ts相关路径也要配置好
      },
    },
    optimizeDeps: {
      exclude: ['lodash-es'],
    },
    css: {
      preprocessorOptions: {
        scss: {
          //注意最后要加上分号;
          additionalData: `@import "./src/styles/var.scss";`,
        },
      },
      modules: {
        // name 表示当前文件名，local 表示当前类名，hash 表示hash值
        generateScopedName: '[name]_[local]_[hash:base64:5]',
      },
      postcss: {
        plugins: [
          presetEnv({
            browsers: ['last 2 versions', '> 1%', 'IE 11'],
            autoprefixer: { grid: true },
          }),
        ],
      },
    },
  };
});
